<template>
    <view class="home" style="background-color: #f7f7f7;">
        <view class="top">
            <u-tabs-swiper
                activeColor="#de4f38" 
                inactive-color="#171717"
                ref="tabs" 
                :list="list" 
                :height="100"
                :current="current" 
                :bar-width="60"
                :bar-style=" {bottom: '8rpx',borderRadius: '6rpx'}"
                @change="handleChangeTab" 
                :is-scroll="false" 
                swiperWidth="750"></u-tabs-swiper>
        </view>
        <swiper
            class="swiper-box"
            :style="{height: height+'px'}"
            :current="swiperCurrent" 
            @transition="transition"
            @animationfinish="animationfinish">
            <swiper-item class="swiper-item" v-for="(item, index) in list" :key="index">
                <scroll-view 
                    scroll-y 
                    style="height: 100%;width: 100%;" 
                    @scrolltolower="reachBottom">
                    <view style="height: 30rpx;"></view>
                    <view class="page-box" style="margin-bottom: 30rpx;">
                        <!-- 支付信息1 -->
                        <view class="pay" v-for="(item, index) in orderList[index]" :key="index">
                            <view class="pay_top">
                                <view class="top_item">
                                    <image src="../../static/icon/dingdan-titlle-list@3x.png"></image>
                                    <text>{{item.order_id}}</text>
                                </view>
                                <view class="top_text">
                                    <text v-if="item.status == 1 && item.pay_status == 1">未支付</text>
                                    <text v-else-if="item.status == 1 && item.ship_status == 1" style="color: #1bc078;">待发货</text>
                                    <text v-else-if="item.status == 1 && item.ship_status == 3" style="color: #0babe0;">待收货</text>
                                    <text v-else-if="item.status == 2">已完成</text>
                                    <text v-else-if="item.status == 3">已取消</text>
                                </view>
                            </view>
                            <view class="pay_body" v-for="(i, idx) in item.items" :key="i.id">
                                <view class="body_img">
                                    <image :src="i.image_url"></image>
                                </view>
                                <view class="body_text">
                                    <text>{{i.name}}</text>
                                    <view class="text_font">
                                        <text>数量: {{i.nums}}</text>
                                        <view class="unmber">
                                            <text>￥{{item.order_amount}}</text>
                                        </view>
                                    </view>
                                </view>
                            </view>
                            <view class="pay_bottom" v-if="item.status == 1 && item.pay_status==1">
                                <view class="cancel_order" @click="orderCancel(item.order_id)">
                                    <text>取消订单</text>
                                </view>
                                <view class="payment" @click="orderPay(item.order_id)">
                                    <text>支付</text>
                                </view>
                            </view>
                        </view>
                    </view>
                    <u-loadmore
                        :status="status" 
                        :load-text="loadText" />
                </scroll-view>
            </swiper-item>
        </swiper>
        
        <u-popup v-model="popupShow" mode="center" border-radius="20">
            <view style="padding: 50rpx;">
                <view style="font-size: 35rpx;font-weight: bold;text-align: center;">输入密码</view>
                <view style="display: flex;font-size: 30rpx;padding: 50rpx 0;">
                    <!-- <view style="width: 150rpx;text-align: right;">密码：</view> -->
                    <view>
                        <input type="number" v-model="password" maxlength="6" placeholder="请输入六位密码" password style="border-bottom: 1rpx solid #999999;"/>
                    </view>
                </view>
                <view>
                    <button @click="sendPassword" style="background-color: #18B566;color: #FFFFFF;" :disabled="disabledStatus">支付</button>
                </view>
            </view>
        </u-popup>
    </view>
</template>

<script>
    export default{
        data(){
            return{
                height: 400,
                current: 0,
                swiperCurrent: 0,
                orderList: [[],[],[],[],[]],
                list: [
                    {
                        id: '1',
                        name: "待付款",
                    },
                    {
                        id: '2',
                        name: "待发货",
                    },
                    {
                        id: '3',
                        name: "待收货",
                    },
                    {
                        id: '6',
                        name: "已完成",
                    },
                    {
                        id: '0',
                        name: "全部"
                    }
                ],
                status: 'loading',
                loadText: {
                    loadmore: '上拉加载更多',
                    loading: '加载中...',
                    nomore: '没有更多数据了'
                },
                params: {
                    page: 1,
                    limit: 20,
                    status: null,
                },
                olPage: 1,
                popupShow: false,
                password: '',
                ids: null,
                disabledStatus: false,
            }
        },
        onLoad(options) {
            uni.showLoading({
                title: '加载中'
            });
            let id = options.id;
            this.list.forEach((item, index) => {
                if(item.id == id) {
                    this.swiperCurrent = index; 
                    this.params.status = item.id;
                    return;
                }
            })
            
            this._getorderlist();
        },
        mounted() {
            const query = uni.createSelectorQuery();
            query.in(this).select('.swiper-box').boundingClientRect();
            query.exec((res) => {
                this.height = uni.getSystemInfoSync().windowHeight - res[0].top;
            })
        },
        methods:{
            sendPassword() {
                if(this.$u.test.isEmpty(this.password)) {
                    uni.showToast({
                        title: '请输入密码',
                        duration: 1000,
                        icon: 'none',
                    });
                    return ;
                }
                this._postUserOrderPay(this.ids, 1);
            },
            orderPay(ids) {
                this.ids = null;
                this.password = '';
                uni.showModal({
                    title: '提示',
                    content: '选择支付方式',
                    cancelText: '余额支付',
                    confirmText: '微信支付',
                    success: (res) => {
                        if (res.confirm) {
                            this._postUserOrderPay(ids, 2);
                        } else if (res.cancel) {
                            this.popupShow = true;
                            this.ids = ids;
                            // this._postUserOrderPay(ids, 1);
                        }
                    }
                });
            },
            _postUserOrderPay(ids, type) {
                let pamams = {};
                if(type == 1) {
                    pamams = {
                        ids: ids,
                        payment_code: 'balancepay',
                        payment_type: '1',
                        password: this.password,
                    };
                } else if (type == 2) {
                    pamams = {
                        ids: ids,
                        payment_code: 'wechatpay',
                        payment_type: '1',
                        params: {
                            // return_url: '/shop/pages/list/myOrder?id=1',
                            trade_type: 'JSAPI'
                        }
                    };
                } else {
                    uni.showToast({
                        title: '支付出错',
                        duration: 1000,
                        icon: 'none',
                    });
                    return ;
                }
                this.disabledStatus = true;
                this.$u.api.postUserOrderPay(pamams).then(res => {
                    if(type == 2) {
                        uni.requestPayment({
                            provider: 'wxpay',
                            timeStamp: res.timeStamp,
                            nonceStr: res.nonceStr,
                            package: res.package,
                            signType: res.signType,
                            paySign: res.paySign,
                            success: (wxres) => {
                                uni.showToast({
                                    title: '支付成功',
                                    duration: 1000
                                });
                                // if(uni.getStorageSync('isMessage') != 1) {
                                    uni.showModal({
                                        title: '提示',
                                        content: '是否授权订阅消息',
                                        success: function (res) {
                                            if (res.confirm) {
                                                // uni.setStorageSync('isMessage', 1);
                                                uni.requestSubscribeMessage({
                                                    tmplIds: [
                                                        getApp().globalData.capitalKey,
                                                        // getApp().globalData.dispatchKey,
                                                        // getApp().globalData.orderTakingKey,
                                                    ],
                                                })
                                            } else if (res.cancel) {
                                            }
                                        }
                                    });
                                // }
                                this._getorderlist();
                            },
                            fail: (wxerr) => {
                                uni.showToast({
                                    title: '支付失败',
                                    duration: 1000,
                                    icon: 'none'
                                });
                            }
                        })
                    } else {
                        this.disabledStatus = false;
                        uni.showToast({
                            title: '支付成功',
                            duration: 1000
                        });
                        // if(uni.getStorageSync('isMessage') != 1) {
                            uni.showModal({
                                title: '提示',
                                content: '是否授权订阅消息',
                                success: function (res) {
                                    if (res.confirm) {
                                        // uni.setStorageSync('isMessage', 1);
                                        uni.requestSubscribeMessage({
                                            tmplIds: [
                                                getApp().globalData.capitalKey,
                                                // getApp().globalData.dispatchKey,
                                                // getApp().globalData.orderTakingKey,
                                            ],
                                        })
                                    } else if (res.cancel) {
                                    }
                                }
                            });
                        // }
                        this._getorderlist();
                    }
                }).catch(err => {
                    uni.showToast({
                        title: err.msg,
                        duration: 1000,
                        icon: 'none',
                    });
                })
            },
            orderCancel(ids) {
                this.$u.api.postOrderCancel({
                    ids: ids,
                }).then(res => {
                    uni.showToast({
                        title: '取消成功',
                        duration: 1000
                    });
                    this._getorderlist();
                }).catch(err => {
                    uni.showToast({
                        title: err.msg,
                        duration: 1000,
                        icon: 'none',
                    });
                })
            },
            handleChangeTab(index) {
                this.swiperCurrent = index
                this.current = index
            },
            transition({ detail: { dx } }) {
                this.$refs.tabs.setDx(dx)
            },
            animationfinish({ detail: { current } }) {
                this.$refs.tabs.setFinishCurrent(current)
                this.swiperCurrent = current
                this.current = current
                this.params = {
                    status: this.list[current].id,
                    page: 1,
                    limit: 20,
                }
                this.olPage = 1;
                this._getorderlist();
            },
            // 下拉到底
            reachBottom() {
                this.params.page++;
                this._getorderlist();
            },
            // 商城订单列表api 
            _getorderlist() {
                let params = {};
                this.status = 'loading'
                if(this.params.status == null && this.params.pay_status == null && this.params.ship_status == null) {
                    params = {
                        page: this.params.page,
                        limit: this.params.limit,
                    }
                } else {
                    params = {
                        page: this.params.page,
                        limit: this.params.limit,
                        status: this.params.status,
                    }
                }
                this.$u.api.getorderlist(params).then(res => {
                    if(res.limit >= res.count && this.params.page == 1) {
                        this.status = 'nomore';
                        this.orderList[this.swiperCurrent] = res.list
                    } else {
                        if(res.list <= 0) {
                            this.status = 'nomore';
                            this.params.page = this.olPage;
                            return ;
                        }
                        this.olPage = this.params.page;
                        this.orderList[this.swiperCurrent] = this.orderList[this.swiperCurrent].concat(res.list);
                    }
                    uni.hideLoading();
                }).catch(err => {
                    uni.hideLoading();
                })
            },
        }
    }
</script>

<style lang="scss" scoped>
    .home {
        // display: flex;
        // flex-direction: column;
        // height: calc(100vh - var(--window-top));
        width: 100%;
        .swiper-box {
            // flex: 1;
            .swiper-item {
                height: 100%;
            }
        }
    }
    .nav-box{
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #ffffff;
        flex-wrap:wrap;
        position: relative;
        .btn{
            display: flex;
            margin: 0 auto;
            justify-content: center;
            image{
                width: 50rpx;
                height: 50rpx;
                position: absolute;
                left: 30rpx;
            }
            text{
                font-size: 38rpx;
                color: #191919;
                font-weight:bold;
            }
        }
    }
    .top{
        background-color: #ffffff;
        // position: fixed;
        // top: 0;
        // width: 100%;
        // left: 0;
        // min-height: 88rpx;
        // z-index: 998;
    }
    .pay{
        width: 690rpx;
        // height: 800rpx;
        background-color: #ffffff;
        border-radius: 20rpx;
        border: 2px solid #f2f2f2;
        margin:0 30rpx;
        .pay_top{
            width: 690rpx;
            height: 98rpx;
            background-color: #ffffff;
            border-radius: 20rpx;
            border-bottom: 1px solid #f2f2f2;
            display: flex;
            position: relative;
            align-items: center;
            .top_item{
                display: flex;
                margin-left: 20rpx;
                image{
                    width: 34rpx;
                    height: 32rpx;
                    margin-right: 10rpx;
                }
                text{
                    font-size: 24rpx;
                    color: #191919;
                }
            }
            .top_text{
                font-size: 24rpx;
                color: #ff4200;
                position: absolute;
                right: 30rpx;
            }
        }
        .pay_body{
            display: flex;
            margin-top: 20rpx;
            margin-bottom: 30rpx;
            .body_img{
                width: 150rpx;
                height: 150rpx;
                margin: 0 20rpx 20rpx 20rpx;
                background-color: #ffffff;
                image{
                    width:100%;
                    height: 100%;
                }
            }
            .body_text{
                flex: 1;
                display: flex;
                flex-wrap: wrap;
                text{
                    font-size: 34rpx;
                    color: #191919;
                    font-weight:bold;
                }
                .text_font{
                    display: flex;
                    margin: 20rpx 0 0 20rpx;
                    text{
                        font-size: 30rpx;
                        color: #999999;
                    }
                    .unmber{
                        margin-left: 160rpx;
                        text{
                            font-size: 30rpx;
                            color: #ff4200;
                        }
                    }
                }
            }
        }
        .pay_bottom{
            display: flex;
            margin: 0 20rpx 20rpx 0;
            border-top: 1px solid #f2f2f2;
            padding-top: 20rpx;
            .cancel_order{
                display: flex;
                width: 163rpx;
                height: 60rpx;
                background-color: #f2f2f2;
                border-radius: 30rpx;
                align-items: center;
                justify-content: center;
                margin-left: auto;
                margin-right: 30rpx;
                text{
                    font-size: 24rpx;
                    color: #999999;
                    text-align:center;
                }
            }
            .payment{
                display: flex;
                width: 163rpx;
                height: 60rpx;
                background-color: #ff4200;
                border-radius: 30rpx;
                align-items: center;
                justify-content: center;
                right: 30rpx;
                text{
                    font-size: 24rpx;
                    color: #ffffff;
                    text-align:center;
                }
            }
        }
    }
    .top_icon{
        width: 50rpx;
        height: 50rpx;
        background-color: #f2f2f2;
        border-radius:50%;
        margin-left: auto;
        margin-right: 30rpx;
        image{
            width: 100%;
            height: 100%;
        }
    }
    
</style>
